<template>
	<view class="dynamic-item">
		<view class="item-hd fboxRow Ycenter">
			<image class="avatar" :src="innerData.avatar" mode="aspectFill"></image>
			<view class=" flex1">
				<text class="name font30" @tap="goMyDdHome">{{ innerData.realName }}</text>
				<!-- <view class="name font30" >{{ innerData.realName }}</view> -->
			</view>
			<view class="time font26 color-6B707C">{{ dateFormat(innerData.gmtCreate) }}</view>
		</view>
		<view class="item-bd">
			<view @tap="goDdDetail" class="con mt20 font30 color-ACB4C7 font-ell6" v-if="innerData.dynamicContent" v-html="resetCon(innerData.dynamicContent)" style="white-space: pre-wrap;"></view>
			<view class="tag-groups fboxWrap font26 mt32" v-if="innerData.groupName || innerData.topicTitle">
				<view class="tag tag-group fboxRow Ycenter" v-if="innerData.groupName" @click="goPage('circle')">
					<text class="bwfont bw-a-zu3303"></text>
					{{ innerData.groupName }}
				</view>
				<view class="tag tag-topic fboxRow Ycenter " v-if="innerData.topicTitle" @click="goPage('topicDetails')">
					<text class="bwfont bw-a-zu3306"></text>
					{{ innerData.topicTitle }}
				</view>
			</view>
			<view class="pic-list mt20" v-if="innerData.picture">
				<template v-if="innerData.pictureType == 3">
					<video class="max-pic" :src="innerData.picture" :poster="innerData.coverURL" :show-fullscreen-btn="false"></video>
				</template>
				<template v-else>
					<image v-if="innerData.pictures.length == 1" class="max-pic" :src="innerData.pictures[0]" @click="picPreview(innerData.pictures, 0)" mode="widthFix"></image>
					<template v-else>
						<image class="pic" v-for="(pic, sub) in innerData.pictures" @click="picPreview(innerData.pictures, sub)" :src="pic" :key="sub" mode="aspectFill"></image>
					</template>
				</template>
			</view>
			<template v-if="innerData.dynamicForwardId">
				<view class="dynamicForward fboxRow Ycenter">
					<image class="pic" :src="innerData.pictureForward" mode="aspectFill"></image>
					<view class="fboxCol flex1 font28 con font-ell3">{{ innerData.dynamicForwardContent }}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { dynamicLike, dynamicUnlike } from '@/api/card.js';
import { attentionAdd, attentionDel } from '@/api/mine.js';
import { dateFormat } from '@/static/js/common.js';
export default {
	props: {
		innerData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: 'dynamic' // 默认动态dynamic || topicDetails 话题详情
		}
	},
	// emits:['updateAttention'],
	computed: {
		_innerData: {
			get() {
				return this.innerData;
			},
			set(val) {
				this.$emit('update:innerData', val);
			}
		}
	},
	data() {
		return {
			dateFormat
		};
	},
	methods: {
		resetCon(con){
			let text = con;
			const {bw_config} = getApp().getBWData(['bw_config'])
			const urls = con.match(/(https?|http)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g)
			if(urls && urls.length){
				bw_config.domainWhitelist.filter(item=>{
					if(text.includes(item)){
						const a = `(https?|http)(:\/\/.*${item}[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])`
						const regx = new RegExp(a, "g");
						text = text.replace(regx,"<a style='color:#E8CDA7' href='$1$2'>$1$2</a>");
					}
				})
			}
			return text
		},
		goMyDdHome() {
			this.$pageTo('/mydd?memberId=' + this.innerData.memberId);
		},
		urlType(url) {
			// const mp4Reg = /^.+(\.mp4)$/
			return /\.(mp4|avi|wmv|mpg|mpeg|mov|rm|ram|swf|flv)/.test(url);
		},
		picPreview(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		// 进入点点详情
		goDdDetail() {
			this.$pageTo('/dynamicDetails?id=' + this.innerData.dynamicId);
		},
		goPage(str) {
			if (str == 'circle' && this.type != 'circle') {
				this.$pageTo('/circle?id=' + this.innerData.groupId);
			}
			if (str == 'topicDetails' && this.type != 'topicDetails') {
				this.$pageTo('/circle/topicDetails?id=' + this.innerData.topicId);
			}
		},
		likeTap() {
			const bw_params = JSON.parse(uni.getStorageSync('bw_params') || '{}');
			const bw_user_temp = JSON.parse(uni.getStorageSync('bw_user_temp') || '{}');
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				const api = this._innerData.isLike ? dynamicUnlike : dynamicLike;
				api({
					busMemberId: this.innerData.memberId,
					businessId: this.innerData.dynamicId,
					memberId: bw_user_temp.memberId
				}).then(res => {
					this._innerData.likeNum = this._innerData.isLike ? this._innerData.likeNum - 1 : this._innerData.likeNum + 1;
					this._innerData.isLike = !this._innerData.isLike;
				});
			} else {
				this.$emit('login')
			}
		},
		moreMenu() {
			const text = this._innerData.isFollow ? '取消关注' : '关注';
			uni.showActionSheet({
				itemList: [text],
				itemColor: '#ACB4C7',
				class: 'actionSheetMenu',
				success: res => {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					const bw_params = JSON.parse(uni.getStorageSync('bw_params') || '{}');
					if (bw_params && bw_params.access_token) {
						if (this._innerData.isFollow) {
							attentionDel({
								memberIdList: [this._innerData.memberId]
							}).then(res => {
								if (res.data) {
									this._innerData.isFollow = false;
									this.$emit('updateAttention', false)
								} else {
									uni.showToast({
										title: res.message
									});
								}
							});
						} else {
							attentionAdd({
								othersId: this._innerData.memberId
							}).then(res => {
								if (res.data) {
									this._innerData.isFollow = true;
									this.$emit('updateAttention', true)
								} else {
									uni.showToast({
										title: res.message
									});
								}
							});
						}
					} else {
						this.$emit('login')
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.dynamic-item {
	padding: 32rpx 40rpx 32rpx 0;
}

.dynamic-item .item-hd .avatar {
	margin-right: 16rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #f9f9f9;
}

.dynamic-item .item-hd .icon {
	width: 6rpx;
	height: 26rpx;
}

.dynamic-item .con {
	line-height: 44rpx;
}

.tag-groups {
}

.tag-groups .tag {
	padding: 0 12rpx;
	height: 48rpx;
	background: rgba(242, 153, 74, 0.1);
	border-radius: 8rpx;
	color: #f2994a;
}

.tag-groups .tag .bwfont {
	margin-right: 8rpx;
}

.tag-groups .tag + .tag {
	margin-left: 16rpx;
}

.tag-groups .tag-topic {
	background: rgba(47, 128, 237, 0.1);
	color: #2f80ed;
}

.dynamic-item .pic-list {
	margin-right: -20rpx;
}

.dynamic-item .pic-list .max-pic {
	width: 670rpx;
	height: 400rpx;
	border-radius: 12rpx;
}

.dynamic-item .pic-list .pic {
	margin: 20rpx 20rpx 0 0;
	width: 196rpx;
	height: 196rpx;
	border-radius: 12rpx;
}

.dynamic-item .icon {
	margin-right: 6rpx;
	width: 34rpx;
	height: 28rpx;
}

.dynamicForward {
	margin-top: 20rpx;
	padding: 30rpx;
	height: 210rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 16, 61, 0.16);
}

.dynamicForward .pic {
	margin-right: 20rpx;
	width: 224rpx;
	height: 150rpx;
	border-radius: 6rpx;
}

.dynamicForward .con {
	max-height: 132rpx;
	overflow: hidden;
}

.item-ft .bwfont {
	margin-right: 8rpx;
	font-size: 24rpx;
}

.state {
	padding: 0 8rpx;
	height: 36rpx;
	border-radius: 4rpx;
	border: 1px solid rgba(232, 205, 16, 1);
	opacity: 0.5;
}
</style>
